<!DOCTYPE html>
<html lang="zh">

<head>
	<th:block th:include="include :: header('项目计划')" />
	<link th:href="@{/css/plugins/gtt/jquery-ui-1.8.4.css?v=3.3.7}" rel="stylesheet"/>
	<link th:href="@{/css/plugins/gtt/jquery.ganttView.css?v=3.3.7}" rel="stylesheet"/>
	<link th:href="@{/css/plugins/gtt/reset.css?v=3.3.7}" rel="stylesheet"/>
	
	<link href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}" rel="stylesheet" />
	<link href="../static/layui/css/dropdown.css" th:href="@{/layui/css/dropdown.css}" rel="stylesheet" />
	<link href="../static/css/projectDetail.css" th:href="@{/css/projectDetail.css}" rel="stylesheet" />
	
	
	<style type="text/css">
		body {
			font-family: tahoma, verdana, helvetica;
			font-size: 0.8em;
			
		}
		.chartBox{
			background:#fff;
			padding:10px;
		}
	</style>
</head>

<body class="fixed-sidebar full-height-layout gray-bg">
	<!-- 头部导航 链接 -->
	<div class="row border-bottom white-bg dashboard-header headerNav">
		<div class="col-sm-1 logo">
			<div class="icon hidden-xs">
				<i class="fa fa-file-powerpoint-o"></i>
			</div>
			<div class="progressBar">
				<i>20.00%</i>
				<!-- style和 aria-valuenow里的数字代表进度 -->
				<div class="layui-progress" style="height: 5px;">
					<div class="layui-progress-bar " lay-percent="20.00%" style="width: 20%;"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-11 navBar">
			<th:block th:include="include :: projectNavBar" />
		</div>
	</div>
	<!-- 主体部分 -->
	<div class="wrapper wrapper-content">
<!-- 		<div class="btn-group-sm" id="toolbar" role="group"> -->
<!--             <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="gcgl:reust:add"> -->
<!--                 <i class="fa fa-plus"></i> 添加计划 -->
<!--             </a> -->
<!--         </div> -->
<!-- 		<div class="col-sm-12 select-table table-striped"> -->
<!--             <table id="bootstrap-table"></table> -->
<!--         </div> -->
	<div class="chartBox">
		<div id="ganttChart"></div> 
<!-- 		<div id="ganttChart2"></div> 表格主体 用ID绑定  chart2使用的是ajax获取接口的方式 -->
	</div>
	<!-- import layui -->
	<th:block th:include="include :: footer" />
	<script th:src="@{/layui/dropdown.js?v=20250801}"></script>
	<th:block th:include="include :: projectDetail" />
	
	<script th:src="@{/js/plugins/gtt/jquery.ganttView.js?v=3.6.1}"></script><!--jquery.ganttView 甘特图插件-->
	<script th:src="@{/js/plugins/gtt/date.js?v=3.6.0}"></script><!--date 日期插件-->
	<!-- import layui -->
	<script th:inline="javascript">
		$(function () {
			
			var ganttData = [[${jlis}]];
			//js数据版,如果直接朝页面输出js数据,则使用此部分代码
			var chartBoxWidth = $(".chartBox").width();
			var ganttSlideWidth = chartBoxWidth - 570;
			$("#ganttChart").ganttView({ 
				data: ganttData,//使用的js数据
				slideWidth: ganttSlideWidth,//右侧甘特图部分的宽度
				behavior: {
					draggable: false,
					onClick: function () { 
					//点击事件
					},
					onResize: function () { 
					//浏览器改变大小事件
	
					}
				}
			});
			
// 			$.ajax({ //ajax接口版 使用接口返回数据时使用此代码
// 				url:"./data/data.json",//接口地址,此处用.json文件作为范例
// 				type: "GET", // 请求方式
// 				data:"",//发送的数据
// 				contentType: "application/json",
// 				dataType: "json", //此处在范例为.json文件时使用,使用接口返回时如果无法处理返回值,可去掉此行
// 				success: function(response) {
// 					console.log("请求成功：", response);
					
					
// 					$("#ganttChart2").ganttView({ 
// 						data: response.data,//范例的返回值中的data为数据集
// 						slideWidth: 900,
// 						behavior: {
// 							draggable: false,
// 							onClick: function () { 
// 							//点击事件
// 							},
// 							onResize: function () { 
// 							//浏览器改变大小事件
	
// 							}
// 						}
// 					});
// 				},
// 				error: function(xhr, status, error) {
// 					console.error("请求失败：", status, error);
// 				}
// 			});
		});
    </script>
    
    <!--选中导航 这段js放在每个页面末尾-->
    <script>
		$(()=>{
			setTimeout(()=>{
				selectedNav(3)//第N个被选中 0即
			},100)
		})
		
		function selectedNav(index){
			$('ul.layui-nav').find('.layui-nav-item').eq(index).addClass('layui-this');
		}
	</script>
</body>
</html>